<template>
  <div class="content-list">
    <div class="content-item">
      <h1 class="content-title">{{ contentObj.title }}</h1>
      <p class="content-time">
        {{ contentObj.createTime }}
        <i>·</i>
        <span
          v-for="item in classifyA"
          :key="item.id"
          @click="handleGoNav(item.path)"
          >{{ item.title }}</span
        >
        <i>·</i>
        阅读 {{ contentObj.look_num }}
      </p>
      <img src="@/static/img/hynew.png" alt="" class="content-img" />
      <div class="content-introduce" v-if="contentObj.introduce">
        <p>
          {{ contentObj.introduce }}
        </p>
      </div>
      <div v-if="!isMenghui">
        <div class="content-description">
          <h3>资源介绍</h3>
          <p>{{ contentObj.introduce }}</p>
        </div>
        <div>
          <div class="content-description">
            <h3>下载地址</h3>
            <p>格式：高清 JPG/PNG <br />大小：未知</p>
          </div>
          <div
            class="content-description"
            v-if="Object.keys(userInfo).length == 0 && contentObj.vip"
          >
            <span
              >温馨提示：这是会员资源，以下仅是小部分预览内容，<a
                href="javascript:;"
                @click="handleGoNav('/login')"
                >登录</a
              >后可下载完整高清晰无水印版本！</span
            >
          </div>
          <div
            class="content-description"
            v-else-if="Object.keys(userInfo).length != 0 && contentObj.vip"
          >
            <p>
              解压密码：www.moehui.com <br />链接：<a
                target="_blank"
                :href="contentObj.vipContent?.split(',')[0]"
                >百度网盘</a
              >
              提取码：{{ contentObj.vipContent?.split(",")[1] }}
            </p>
          </div>
        </div>
        <!-- 后台图片分页文章 -->
        <ContentPage
          :imgHost="imgHost"
          :imgArr="imgArr"
          v-if="contentObj.articleClassifyId == 1 && imgArr.length > 0"
        ></ContentPage>
        <!-- 后台图片分栏文章 -->
        <div
          class="content-column-picture"
          v-if="contentObj.articleClassifyId == 2"
        >
          <img
            :src="imgHost + item"
            v-for="item in imgArr"
            :key="item"
            alt=""
          />
        </div>
        <!-- 后台自定义文章 -->
        <div
          class="content-custom"
          v-html="contentObj.content"
          v-if="contentObj.articleClassifyId == 3"
        ></div>
      </div>
      <div v-else>
        <UpdateQuery
          v-if="contentObj.menghuiComp == 'UpdateQuery'"
        ></UpdateQuery>
        <Album v-if="contentObj.menghuiComp == 'Album'"></Album>
        <MembershipPrivileges
          v-if="contentObj.menghuiComp == 'MembershipPrivileges'"
        ></MembershipPrivileges>
        <MenghuiLife
          v-if="contentObj.menghuiComp == 'MenghuiLife'"
        ></MenghuiLife>
        <WelCome v-if="contentObj.menghuiComp == 'WelCome'"></WelCome>
        <NewYear v-if="contentObj.menghuiComp == 'NewYear'"></NewYear>
        <NotUpdata v-if="contentObj.menghuiComp == 'NotUpdata'"></NotUpdata>
      </div>
      <div class="content-annotation">
        <p>
          本站教程资源、画集均来自网络分享，仅供个人学习试看使用，切勿用于商业用途！如有侵权，请与我们联系。
        </p>
        <p>
          本站资源推荐使用WINRAR5.0以上版本进行解压
          可前往官网下载http://www.winrar.com.cn/
        </p>
        <p>本站资源如没特别注明 解压密码均为：www.moehui.com</p>
      </div>
      <div class="content-tag">
        <span>CG上色</span>
        <span>Painter</span>
        <span>ps技法</span>
        <span>上色教程</span>
        <span>数码绘</span>
        <span>板绘</span>
        <span>漫画CG技法</span>
        <span>美少女</span>
      </div>
      <div class="content-praise">
        <div
          class="content-button"
          :class="contentObj.isLike ? 'active' : ''"
          @click="handlePraise"
        >
          <i class="iconfont icon-dianzan"></i> 赞 ({{ contentObj.like_num }})
        </div>
      </div>
    </div>
    <div class="content-foot">
      <span
        class="iconfont icon-shoucang"
        :class="contentObj.isCollect ? 'active' : ''"
        @click="handleCollect"
        >{{ contentObj.collect_num }}</span
      >
      <a href="javascript:;" @click.prevent="handleAnchor('comment')"
        ><span class="iconfont icon-xiaoxi">{{
          contentObj.comment_num
        }}</span></a
      >
      <span class="iconfont icon-fenxiangtianchong" @click="handlePoster"
        >生成海报</span
      >
      <span
        class="iconfont icon-shejiwenzhang201"
        @click="handleAmplification"
      ></span>
    </div>
    <div class="content-pre-next" v-if="isShowPreNext">
      <div
        class="content-pre"
        :style="{
          backgroundImage: `url(${prePage.imgUrl})`,
        }"
        @click="handleGoNav('/content-article/' + prePage.id)"
      >
        <div>
          <p>{{ prePage.title }}</p>
          <div class="pre-foot">
            <span
              ><i class="iconfont icon-jiantou_yemian_xiangzuo"></i>上一篇</span
            >
            <span>{{ prePage.createTime }}</span>
          </div>
        </div>
      </div>
      <div
        class="content-next"
        :style="{
          backgroundImage: `url(${nextPage.imgUrl})`,
        }"
        @click="handleGoNav('/content-article/' + nextPage.id)"
      >
        <div>
          <p>{{ nextPage.title }}</p>
          <div class="next-foot">
            <span>{{ nextPage.createTime }}</span>
            <span>下一篇<i class="iconfont icon-shuaxin"></i></span>
          </div>
        </div>
      </div>
    </div>
    <DetailsRecommend
      :path="contentObj.classifyArrPath"
      v-if="contentObj?.classifyArrPath?.length > 0"
    ></DetailsRecommend>
    <Comment></Comment>
    <div class="poster" v-if="isShowPoster">
      <div class="poster-mode" @click="handlePoster"></div>
      <div class="top_tips">请长按保存图片，将内容分享给更多好友</div>
      <div class="poster-content">
        <img class="poster-img" src="" alt="" />
        <div
          class="poster-item"
          style="position: absolute; margin-top: -99999px !important"
        >
          <div class="poster-cover">
            <img :src="contentObj.imgHost + contentObj.imgUrl" alt="" />
            <div>
              <p>
                {{ contentObj.title }}{{ contentObj.title }}{{ contentObj.title
                }}{{ contentObj.title }}{{ contentObj.title }}
              </p>
            </div>
          </div>
          <div class="poster-time">{{ contentObj.createTime }}</div>
          <div class="poster-introduce">{{ contentObj.introduce }}</div>
          <div class="poster-QRcode">
            <img src="@/static/img/logo.png" alt="" />
            <img src="@/static/QRcode.png" alt="" />
          </div>
        </div>
        <div class="poster-close" @click="handlePoster">
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
    <div class="amplification" v-if="isShowAmplification">
      <i class="iconfont icon-ffanhui-" @click="handleAmplification"></i>
      <div class="content-item">
        <h1 class="content-title">{{ contentObj.title }}</h1>
        <p class="content-time">
          {{ contentObj.createTime }}
          <i>·</i>
          <span
            v-for="item in classifyA"
            :key="item.id"
            @click="handleGoNav(item.path)"
            >{{ item.title }}</span
          >
          <i>·</i>
          阅读 {{ contentObj.look_num }}
        </p>
        <img src="@/static/img/hynew.png" alt="" class="content-img" />
        <div class="content-introduce" v-if="contentObj.introduce">
          <p>
            {{ contentObj.introduce }}
          </p>
        </div>
        <div v-if="!isMenghui">
          <div class="content-description">
            <h3>资源介绍</h3>
            <p>{{ contentObj.introduce }}</p>
          </div>
          <div>
            <div class="content-description">
              <h3>下载地址</h3>
              <p>格式：高清 JPG/PNG <br />大小：未知</p>
            </div>
            <div
              class="content-description"
              v-if="Object.keys(userInfo).length == 0 && contentObj.vip"
            >
              <span
                >温馨提示：这是会员资源，以下仅是小部分预览内容，<a
                  href="javascript:;"
                  @click="handleGoNav('/login')"
                  >登录</a
                >后可下载完整高清晰无水印版本！</span
              >
            </div>
            <div
              class="content-description"
              v-else-if="Object.keys(userInfo).length != 0 && contentObj.vip"
            >
              <p>
                解压密码：www.moehui.com <br />链接：<a
                  target="_blank"
                  :href="contentObj.vipContent?.split(',')[0]"
                  >百度网盘</a
                >
                提取码：{{ contentObj.vipContent?.split(",")[1] }}
              </p>
            </div>
          </div>
          <!-- 后台图片分页文章 -->
          <ContentPage
            :imgHost="imgHost"
            :imgArr="imgArr"
            v-if="contentObj.articleClassifyId == 1 && imgArr.length > 0"
          ></ContentPage>
          <!-- 后台图片分栏文章 -->
          <div
            class="content-column-picture"
            v-if="contentObj.articleClassifyId == 2"
          >
            <img
              :src="imgHost + item"
              v-for="item in imgArr"
              :key="item"
              alt=""
            />
          </div>
          <!-- 后台自定义文章 -->
          <div
            class="content-custom"
            v-html="contentObj.content"
            v-if="contentObj.articleClassifyId == 3"
          ></div>
        </div>
        <div v-else>
          <UpdateQuery
            v-if="contentObj.menghuiComp == 'UpdateQuery'"
          ></UpdateQuery>
          <Album v-if="contentObj.menghuiComp == 'Album'"></Album>
          <MembershipPrivileges
            v-if="contentObj.menghuiComp == 'MembershipPrivileges'"
          ></MembershipPrivileges>
          <MenghuiLife
            v-if="contentObj.menghuiComp == 'MenghuiLife'"
          ></MenghuiLife>
          <WelCome v-if="contentObj.menghuiComp == 'WelCome'"></WelCome>
          <NewYear v-if="contentObj.menghuiComp == 'NewYear'"></NewYear>
          <NotUpdata v-if="contentObj.menghuiComp == 'NotUpdata'"></NotUpdata>
        </div>
        <div class="content-annotation">
          <p>
            本站教程资源、画集均来自网络分享，仅供个人学习试看使用，切勿用于商业用途！如有侵权，请与我们联系。
          </p>
          <p>
            本站资源推荐使用WINRAR5.0以上版本进行解压
            可前往官网下载http://www.winrar.com.cn/
          </p>
          <p>本站资源如没特别注明 解压密码均为：www.moehui.com</p>
        </div>
      </div>
      <div class="content-pre-next" v-if="isShowPreNext">
        <div
          class="content-pre"
          :style="{
            backgroundImage: `url(${prePage.imgUrl})`,
          }"
          @click="handleGoNav('/content-article/' + prePage.id)"
        >
          <div>
            <p>{{ prePage.title }}</p>
            <div class="pre-foot">
              <span
                ><i class="iconfont icon-jiantou_yemian_xiangzuo"></i
                >上一篇</span
              >
              <span>{{ prePage.createTime }}</span>
            </div>
          </div>
        </div>
        <div
          class="content-next"
          :style="{
            backgroundImage: `url(${nextPage.imgUrl})`,
          }"
          @click="handleGoNav('/content-article/' + nextPage.id)"
        >
          <div>
            <p>{{ nextPage.title }}</p>
            <div class="next-foot">
              <span>{{ nextPage.createTime }}</span>
              <span>下一篇<i class="iconfont icon-shuaxin"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import UpdateQuery from "@/components/homeComp/menghuiList/UpdateQuery.vue";
import Album from "@/components/homeComp/menghuiList/Album.vue";
import MembershipPrivileges from "@/components/homeComp/menghuiList/MembershipPrivileges.vue";
import MenghuiLife from "@/components/homeComp/menghuiList/MenghuiLife.vue";
import WelCome from "@/components/homeComp/menghuiList/WelCome.vue";
import NewYear from "@/components/homeComp/menghuiList/NewYear.vue";
import NotUpdata from "@/components/homeComp/menghuiList/NotUpdata.vue";
import DetailsRecommend from "@/components/detailsRecommend/DetailsRecommend.vue";
import Comment from "@/components/comment/Comment.vue";
import ContentPage from "./content/ContentPage.vue";
// import {
//   getContentArticle,
//   getContentTitle,
//   filesHost,
//   likeCollect,
// } from "@/api/api";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "ContentList",
  components: {
    UpdateQuery,
    Album,
    MembershipPrivileges,
    MenghuiLife,
    WelCome,
    NewYear,
    NotUpdata,
    ContentPage,
    DetailsRecommend,
    Comment,
  },
  data() {
    return {
      isMenghui: false,
      imgHost: "",
      imgArr: [],
      contentObj: {},
      classifyA: [],
      prePage: {},
      nextPage: {},
      isShowPreNext: false,
      isShowPoster: false,
      isShowAmplification: false,
    };
  },
  computed: {
    ...mapState(["menghuiList", "userInfo"]),
  },
  async fetch() {
    const resImgHost = await this.$api.filesHost();
    this.imgHost = resImgHost.data;

    this.changeGoBack(false);

    // 文章内容获取及处理
    let res;
    if (Object.keys(this.userInfo).length != 0) {
      res = await this.$api.getContentArticle({
        articleId: this.$route.params.id,
        user_id: this.userInfo.id,
        isVip: true,
      });
    } else {
      res = await this.$api.getContentArticle({
        articleId: this.$route.params.id,
        user_id: this.userInfo.id,
      });
    }
    if (res.code != 200) {
      this.$emit("isShow404", true);
      await this.changeGoBack(true);
      return;
    }
    this.$emit("isShow404", false);
    // console.log(res);
    //浏览器返回 面包屑导航定义 低网速处理
    await this.handleSetActiveArr({
      path: res.data[0].classifyArrPath.split(",")[0],
      app: this,
    });
    await this.changeGoBack(true);

    this.contentObj = res.data[0];
    // console.log(this.contentObj);
    this.$cookies.set("authorId", this.contentObj.authorId);

    let classifyArr = this.contentObj.classifyArrPath.split(",");
    for (let i = 0; i < classifyArr.length; i++) {
      const { data } = await this.$api.getContentTitle({
        classifyPath: classifyArr[i],
      });
      this.classifyA.push(data[0]);
    }

    if (this.contentObj.articleClassifyId != 3) {
      this.imgArr = this.contentObj.content.split(",");
    }
    this.menghuiList.forEach((item) => {
      if (this.contentObj.id == item.id) {
        this.isMenghui = true;
        this.contentObj.menghuiComp = item.menghuiComp;
      }
    });

    //上一篇，下一篇
    let prePage = await this.$api.getContentArticle({
      articleId: this.$route.params.id,
      prePage: true,
    });
    if (prePage.data.length == 0) {
      prePage = await this.$api.getContentArticle({ articleId: 1 });
    }
    if (typeof prePage.data != "string") {
      this.prePage = prePage.data[0];
      this.prePage.imgUrl = this.imgHost + this.prePage.imgUrl;
    }

    let nextPage = await this.$api.getContentArticle({
      articleId: this.$route.params.id,
      nextPage: true,
    });
    if (nextPage.data.length == 0) {
      nextPage = await this.$api.getContentArticle({ articleId: 1 });
    }
    if (typeof nextPage.data != "string") {
      this.nextPage = nextPage.data[0];
      this.nextPage.imgUrl = this.imgHost + this.nextPage.imgUrl;
    }
    // console.log(prePage,nextPage);
    this.isShowPreNext = true;
  },
  mounted() {
    document.querySelector("html").style.height = "initial";
    document.querySelector("html").style.overflow = "auto";
  },
  methods: {
    ...mapMutations(["changeGoBack"]),
    ...mapActions(["handleSetActiveArr"]),
    async handleGoNav(path) {
      //跳转页面
      this.$router.push(path);
    },
    handlePraise() {
      // 点赞
      if (Object.keys(this.userInfo).length > 0) {
        let value = this.contentObj.isLike ? 0 : 1;
        this.$api.likeCollect({
          article_id: this.$route.params.id,
          user_id: this.userInfo.id,
          fieldName: "isLike",
          value,
        });
        this.contentObj.isLike = !this.contentObj.isLike;
        if (this.contentObj.isLike) {
          this.contentObj.like_num++;
        } else {
          this.contentObj.like_num--;
        }
      } else {
        this.$confirm("您还未登录，请登录后再进行相关操作！", "请登录", {
          distinguishCancelAndClose: true,
          confirmButtonText: "注册",
          cancelButtonText: "登录",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch((action) => {
            if (action === "cancel") {
              this.$router.push("/login");
            }
          });
      }
    },
    handleCollect() {
      //点击收藏
      if (Object.keys(this.userInfo).length > 0) {
        let value = this.contentObj.isCollect ? 0 : 1;
        this.$api.likeCollect({
          article_id: this.$route.params.id,
          user_id: this.userInfo.id,
          fieldName: "isCollect",
          value,
        });
        this.contentObj.isCollect = !this.contentObj.isCollect;
        if (this.contentObj.isCollect) {
          this.contentObj.collect_num++;
        } else {
          this.contentObj.collect_num--;
        }
      } else {
        this.$confirm("您还未登录，请登录后再进行相关操作！", "请登录", {
          distinguishCancelAndClose: true,
          confirmButtonText: "注册",
          cancelButtonText: "登录",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch((action) => {
            if (action === "cancel") {
              this.$router.push("/login");
            }
          });
      }
    },
    handleAnchor(anchorName) {
      //跳转锚点
      const anchorElement = document.getElementById(anchorName);
      if (anchorElement) {
        anchorElement.scrollIntoView();
      }
    },
    handlePoster() {
      // 生成海报
      this.isShowPoster = !this.isShowPoster;
      if (this.isShowPoster) {
        this.$nextTick(() => {
          html2canvas(document.querySelector(".poster-item"), {
            useCORS: true,
          }).then(function (canvas) {
            // document.body.appendChild(canvas);
            let url = canvas.toDataURL("image/png");
            document.querySelector(".poster-img").src = url;
            // console.log(url);
            // let link = document.createElement("a");
            // link.download = "图片.png";
            // link.href = url;
            // document.body.appendChild(link);
            // link.click();
            // document.body.removeChild(link);
          });
          document.querySelector(".poster-item").remove();
        });
      }
    },
    handleAmplification() {
      // 放大内容
      this.isShowAmplification = !this.isShowAmplification;
      if (this.isShowAmplification) {
        document.querySelector("html").style.height = 0;
        document.querySelector("html").style.overflow = "hidden";
        document.querySelector("html").scrollTop = 0;
      } else {
        document.querySelector("html").style.height = "initial";
        document.querySelector("html").style.overflow = "auto";
      }
    },
  },
};
</script>

<style lang="less" scoped>
@media only screen and (min-width: 993px) {
  .content-list {
    .poster {
      .top_tips {
        display: none;
      }
    }
  }
}
@media only screen and (max-width: 992px) {
  .content-list {
    .poster {
      .top_tips {
        display: block;
      }
    }
  }
}
.content-list {
  border: 10px solid #f5f5f5;
  box-sizing: border-box;
  .content-item {
    padding: 20px 20px 0;
    background: #fff;
    .content-title {
      font-size: 24px;
      margin-bottom: 20px;
    }
    .content-time {
      font-size: 14px;
      color: #26262699;
      margin-bottom: 30px;
      span {
        padding: 5px;
        cursor: pointer;
        &:hover {
          color: #0088cc;
        }
        &::after {
          content: ",";
        }
        &:nth-last-of-type(1) {
          &::after {
            content: "";
          }
        }
      }
      i {
        padding: 0 5px;
        font-weight: bold;
      }
    }
    .content-img {
      width: 100%;
      margin-bottom: 20px;
    }
    .content-introduce {
      padding: 15px;
      margin-bottom: 20px;
      background: #f5f5f5;
      p {
        line-height: 1.8;
        color: #26262699;
      }
    }
    .content-description {
      margin-bottom: 20px;
      h3 {
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 12px;
        margin: 52px 0 16px;
        border-bottom: 1px solid #f0f0f0;
      }
      p {
        color: #262626;
        line-height: 1.8;
        word-wrap: break-word;
        a {
          color: #0088cc;
          &:hover {
            color: #3361ea;
          }
        }
      }
      span {
        color: #ff0000;
        a {
          color: #0088cc;
          &:hover {
            color: #3361ea;
          }
        }
      }
    }
    .content-column-picture {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      img {
        width: 50%;
        height: 100%;
        padding: 10px;
        margin-bottom: 20px;
        box-sizing: border-box;

        &:nth-of-type(2n + 1) {
          padding-left: 0;
        }
        &:nth-of-type(2n) {
          padding-right: 0;
        }
      }
    }
    .content-custom {
      /deep/img {
        max-width: 100%;
      }
    }
    .content-annotation {
      font-size: 14px;
      padding: 15px;
      margin-bottom: 20px;
      background: #f5f5f5;
      p {
        line-height: 1.8;
        padding-bottom: 8px;
        color: #26262699;
      }
    }
    .content-tag {
      display: flex;
      flex-wrap: wrap;
      margin-top: 30px;
      span {
        height: 22px;
        font-size: 14px;
        background: #f4f4f4;
        margin: 0 10px 5px 0;
        padding-right: 10px;
        border-radius: 11px;
        &::before {
          content: "#";
          color: #fff;
          width: 22px;
          height: 22px;
          line-height: 22px;
          display: inline-block;
          border-radius: 11px;
          margin-right: 5px;
          text-align: center;
          background: #0088cc;
        }
        &:hover {
          cursor: pointer;
          color: #fff;
          background: #3361ea;
        }
      }
    }
    .content-praise {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px 0;
      .content-button {
        color: #0088cc;
        border: 1px solid #0088cc;
        padding: 4px 30px;
        line-height: 30px;
        border-radius: 4px;
        cursor: pointer;
        &:hover {
          color: #fff;
          background: #3361ea;
        }
      }
      .content-button.active {
        color: #fff;
        background: #3361ea;
      }
    }
  }
  .content-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: center;
    border-top: 1px solid #eee;
    padding: 20px 0;
    background: #fff;
    span {
      cursor: pointer;
      padding: 0 10px;
      margin: 0 5px;
      color: #999999;
      &::before {
        margin: 0 5px;
      }
      &:hover {
        color: #3361ea;
      }
      &:nth-of-type(1).active {
        color: #3361ea;
      }
    }
    .icon-fenxiangtianchong {
      border-left: 1px solid #999999;
      border-right: 1px solid #999999;
    }
  }
  .content-pre-next {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    height: 94px;
    > div {
      width: 49%;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      cursor: pointer;
      > div {
        color: #fff;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: rgba(0, 0, 0, 0.5);
        &:hover {
          background: rgba(0, 0, 0, 0.7);
        }
        p {
          padding: 10px 15px 0;
          box-sizing: border-box;
          border: transparent;
          line-height: 1.625;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .pre-foot,
        .next-foot {
          padding: 10px 15px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          span {
            display: flex;
            align-items: center;
            i {
              font-size: 12px;
            }
            .icon-shuaxin {
              margin-left: 5px;
            }
            .icon-jiantou_yemian_xiangzuo {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  .poster {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    .poster-mode {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
    }
    .top_tips {
      position: sticky;
      top: 0;
      text-align: center;
      z-index: 9;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      background: rgba(255, 235, 155, 0.95);
      color: #a65018;
    }
    .poster-content {
      position: sticky;
      top: 10vh;
      width: 375px;
      margin: 0 auto;
      .poster-img {
        width: 100%;
      }
      .poster-item {
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        .poster-cover {
          position: relative;
          img {
            width: 100%;
          }
          div {
            position: absolute;
            bottom: 1px;
            left: 0;
            width: 100%;
            background: linear-gradient(
              to top,
              rgba(0, 0, 0, 0.5),
              transparent
            );
            p {
              box-sizing: border-box;
              font-size: 20px;
              line-height: 1.2;
              color: #fff;
              word-wrap: break-word;
              margin: 50px 20px 20px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
        }
        .poster-time {
          margin: 30px 20px;
          font-size: 12px;
          color: #666666;
        }
        .poster-introduce {
          margin: 20px;
          font-size: 14px;
          line-height: 1.6;
        }
        .poster-QRcode {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
        }
      }
      .poster-close {
        position: relative;
        top: -25px;
        margin: 0 auto;
        width: 50px;
        height: 50px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        span {
          position: absolute;
          top: 48%;
          left: 25%;
          display: block;
          width: 25px;
          height: 1.5px;
          background: #000;
          &:nth-of-type(1) {
            transform: rotate(45deg);
          }
          &:nth-of-type(2) {
            transform: rotate(-45deg);
          }
        }
      }
    }
  }
  .amplification {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: #fff;
    z-index: 9999;
    > div {
      width: 860px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    > i {
      position: fixed;
      right: 30px;
      top: 60px;
      font-size: 50px;
      cursor: pointer;
    }
    .content-pre-next {
      margin-bottom: 50px;
    }
  }
}
</style>